﻿@(Html.Kendo().Editor()
      .Name("Editor")
      .HtmlAttributes(new { style = "width: 740px;height:440px" })
      .Events(events => events
          .Change("change")
          .Execute("execute")
          .Select("select")
          .Paste("paste")
       )
      .Value(@<text>
            <p>
               <img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
            </p>
            <p>
                Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
                In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
                accessibility standards and provides API for content manipulation.
            </p>
            <p>Features include:</p>
            <ul>
                <li>Text formatting &amp; alignment</li>
                <li>Bulleted and numbered lists</li>
                <li>Hyperlink and image dialogs</li>
                <li>Cross-browser support</li>
                <li>Identical HTML output across browsers</li>
                <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
            </ul>
            <p>
                Read <a href="http://www.kendoui.com/documentation/introduction.aspx">more details</a> or send us your
                <a href="http://www.kendoui.com/forums.aspx">feedback</a>!
            </p>
      </text>)
)

<script>
    function change(e) {
        kendoConsole.log("change");
    }

    function execute(e) {
        kendoConsole.log("execute command :: " + e.name);
    }

    function select(e) {
        kendoConsole.log("selection change");
    }

    function paste(e) {
        kendoConsole.log("paste");
    }

    function contentLoad(e) {
        kendoConsole.log("Content loaded in <b>"+ $(e.item).find("> .k-link").text() +
                            "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
    }

    function error(e) {
        kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
    }
</script>

<div class="console"></div>